.video-list {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 26, 40, 0.72);
  display: flex;
  flex-direction: column;

  .video-content {
    flex: 9;
    //background-image: url("https://img0.baidu.com/it/u=2791741382,2064729282&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    height: 50%;
    .mainVideo{
      width: 100%;
      max-height: 100%;
      object-fit: contain
    }
    .title-wrap {
      background: linear-gradient(to bottom , #0D1B2F 0%, rgba(13,28,49,0.01) 99%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);
      padding: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      width: 100%;
      top: 0;
      .btn {
        padding: 3px 6px;
        color: white;
        background-color: blue;
        border: 1px solid blue;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
        display: inline-block;
        background: linear-gradient(to bottom, #203c5a, #2a6ab3);
      }
    }
  }

  .list-wrap {
    flex: 5;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 15px;
    padding-top: 5px;
    height: 40%;
    overflow: hidden;

    .list {
      flex: 1;
      display: flex;
      margin-top: 10px;
      height: 100%;
      overflow: hidden;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 30px;
        overflow: hidden;

        &:last-child {
          margin-right: 0px;
        }

        .title, .time {
          line-height: 2em;
        }
        .mainVideo{
          flex: 1;
          width: 100%;
          max-height: 100%;
          object-fit: contain
        }
        .preview {
          flex: 1;
          margin-top: 10px;
          //background-image: url("https://img0.baidu.com/it/u=2791741382,2064729282&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          overflow: hidden;
        }
      }
    }
  }
}
